import React, { useState } from 'react'
import { NavBar, Button, Address, Cell,Switch,Toast } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import '@nutui/nutui-react/dist/style.css'
import { Form, Input, List } from 'antd-mobile'
import { TextArea } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import axios from 'axios'
import { Area, Field } from 'react-vant'
import { areaList } from '@vant/area-data'
export default function Addressedit() {
    let [url, seturl] = useSearchParams("")
    let navigate = useNavigate()
    let [name, setName] = useState(url.get("name"))
    let [phone, setPhone] = useState(url.get("phone"))
    const [text, setText] = useState(url.get("region"))
    let [value, setValue] = useState("")
    let [textarea, setTextarea] = useState(url.get("addr"))
    let [flag, setFlag] = useState("")

    let del = async (id) => {
        await axios.get("http://123.57.180.216:3000/del",{params:{_id:id}})
        navigate("/address")
    }
    let edit = async () => {
        let obj = {
            _id: url.get("_id"),
            name: name,
            phone: phone,
            region: text,
            addr: textarea
        }
        await axios.post("http://123.57.180.216:3000/edit", obj)
        navigate("/address")
    }
    const [checkedAsync, setCheckedAsync] = useState(false)

    const onChangeAsync = (value, event) => {
        
        Toast.show("设置成功")
        setTimeout(() => {
            setCheckedAsync(value)
            setFlag(url.get("_id"))
        }, 2000)
        navigate(`/address?flag=${url.get("_id")}`)
    }
    return (
        <div>
            <NavBar
                back={
                    <>
                        <ArrowLeft />
                    </>
                }
                onBackClick={() => navigate("/settings")}
                right={
                    <span style={{ fontSize: "18px" }} onClick={()=>del(url.get("_id"))}>删除</span>
                }
            >
                修改地址信息
            </NavBar>
            <span style={{ marginLeft: "20px" }}>收货人<Input value={name} onChange={(e) => setName(e)} placeholder='请输入姓名' style={{ marginLeft: "20px" }} /></span>
            <br></br>
            <span style={{ marginLeft: "20px" }}>联系电话<Input value={phone} onChange={(e) => setPhone(e)} placeholder='请输入手机号码' style={{ marginLeft: "20px" }} /></span>            
            <Area
                popup={{
                    round: true,
                }}
                title='标题'
                value={value}
                areaList={areaList}
                onConfirm={(values, options) => {
                    setValue(values)
                    setText(options.map(option => option.text).join(' '))
                }}
            >
                {(_, selectRows, actions) => {
                    return (
                        <Field
                            label='选择地区'
                            value={text}
                            onClick={() => actions.open()}
                        />
                    )
                }}
            </Area>
            <span style={{ marginLeft: "20px" }}>详细地址<TextArea placeholder='请输入内容' value={textarea} onChange={(e) => setTextarea(e)} clearable style={{ marginLeft: "20px", height: "150px" }} /></span>
            <span style={{ marginLeft: "20px" }}>设置为默认地址</span><span style={{ float: "right", marginRight: "20px" }}><Switch checked={checkedAsync}
                onChange={(value, event) => onChangeAsync(value, event)} /></span>            <div style={{ position: "fixed", top: "690px", width: "96%", height: "50px", marginLeft: "1%" }}>
                <Button type="primary" block onClick={edit}>保存地址</Button>
            </div>
        </div >
    )
}
